Day28:網頁開發學習之路-Animation(動畫）

2022 iThome 鐵人賽

DAY 28

自我挑戰組

網頁開發（html.css）系列第 28 篇

14th鐵人賽

claireyang

2022-09-28 14:47:45

644 瀏覽

分享至

想要再網頁增加一些動畫，讓網頁變得更生動，可以在元素中加上Animation設定，搭配@keyframes(關鍵影格)移動元素位置，做出動畫的效果

Animation CSS 動畫屬性總共有八種屬性

1.animation-delay

定義元素讀取完畢到動畫開始的間隔時間。
預設 0，設定的單位可以是秒(s)或毫秒(ms)

2.animation-direction

定義是否動畫播放完畢後將會反向播放。
有 reverse(反方向)、alternate(來回，正反輪流)、alternate-reverse(alternate的相反)

3.animation-duration

定義動畫完成一次週期的時間。
預設 0，設定的單位可以是秒(s)或毫秒(ms)

4.animation-iteration-count

定義動畫重複的次數，動畫播放次數，預設 1
可以用 infinite 來讓動畫永遠重複播放。

5.animation-name

定義關鍵影格 @keyframes(關鍵影格)的名字。

6.animation-play-state

控制動畫的播放狀態。有 pause 和 running 兩種值，後者為預設值。

7.animation-timing-function

定義動畫轉變時時間的加速曲線 (例如 linear)。
可以參考第Day25:網頁開發學習之路-transition(轉場）

8.animation-fill-mode

定義元素在動畫播放外(動畫開始前及結束後)的狀態。
有 forwards(停留在動畫結束的畫面)、backwards(動畫結束時回到最初畫面)、both。
animation-fill-mode參考資料

透過@keyframes(關鍵影格)移動元素位置，使用了from和to，
from表示起始，也可以用 0% 表示，to 表示結束，也可以用 100% 表示

完整的html和結果

<style>
      img {
        animation-name: cross;
        animation-duration: 10s;
        animation-delay: 10s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        width: 200px;
        height: 200px;
      }

      @keyframes cross {
        0% {
          transform: translate(0px);
        }

        50% {
          transform: translate(250px);
        }

        100% {
          transform: translate(500px) scale(0.5, 0.5);
        }
      }
    </style>
  </head>
  <body>
    <div><img src="/icons8-car-96.png" /></div>
  </body>